<!--
   -window 尺寸:
   -对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
   -window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
   -window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
   -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜鸟教程(runoob.com)</title>
		<script>
			function newDoc(){
				window.location.assign("https://www.runoob.com");
			}
			function goBack(){
				window.history.back();
			}
			function goForward(){
				window.history.forward();
			}
			function myFunction1(){
				alert("你好，我是一个警告框！");
			}
			function myFunction2(){
				var x;
				var r=confirm("按下按钮!");
				if (r==true){
					x="你按下了\"确定\"按钮!";
				}
				else{
					x="你按下了\"取消\"按钮!";
				}
				document.getElementById("demo2").innerHTML=x;
			}
			function myFunction3(){
				var x;
				var person=prompt("请输入你的名字","Harry Potter");
				if (person!=null && person!=""){
					x="你好 " + person + "! 今天感觉如何?";
					document.getElementById("demo3").innerHTML=x;
				}
			}
			function myFunction4(){
				alert("Hello\nHow are you?");
			}
		</script>
	</head>
	<body>

		<!--实用的 JavaScript 方案（涵盖所有浏览器）：-->
		<p id="demo"></p>
		<script>
			var w=window.innerWidth
			|| document.documentElement.clientWidth
			|| document.body.clientWidth;
			var h=window.innerHeight
			|| document.documentElement.clientHeight
			|| document.body.clientHeight;
			x=document.getElementById("demo");
			x.innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。"
		</script>

		<!--
		   -其他 Window 方法:
		   -    window.open() - 打开新窗口
		   -    window.close() - 关闭当前窗口
		   -    window.moveTo() - 移动当前窗口
		   -    window.resizeTo() - 调整当前窗口的尺寸
		   -->

		<!--
		   -Window Screen
		   -    window.screen对象在编写时可以不使用 window 这个前缀。
		   -    screen.availWidth - 可用的屏幕宽度
		   -    screen.availHeight - 可用的屏幕高度
		   -->
		<script>
			document.write("可用宽度: " + screen.availWidth + "<br \n>");
			document.write("可用高度: " + screen.availHeight + "<br \n>");
		</script>

		<!--
		   -Window Location
		   -window.location 对象在编写时可不使用 window 这个前缀
		   -    location.hostname 返回 web 主机的域名
		   -    location.pathname 返回当前页面的路径和文件名
		   -    location.port 返回 web 主机的端口 （80 或 443）
		   -    location.protocol 返回所使用的 web 协议（http: 或 https:）
		   -    location.href href属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整URL
		   -    location.assign() 方法加载新的文档
		   -->
		<script>
			document.write(location.href + "<br \n>");
			document.write(location.pathname + "<br \n>");
		</script>

		<!--加载新文档-->
		<input type="button" value="加载新文档" onclick="newDoc()">

		<!--
		   -Window History
		   -window.history对象在编写时可不使用 window 这个前缀
		   -    history.back() - 与在浏览器点击后退按钮相同
		   -    history.forward() - 与在浏览器中点击向前按钮相同
		   -->
		<input type="button" value="Back" onclick="goBack()">
		<input type="button" value="Forward" onclick="goForward()">

		<!--window.navigator 对象包含有关访问者浏览器的信息-->
		<div id="example"></div>
		<script>
			txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
			txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
			txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
			txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
			txt+= "<p>硬件平台: " + navigator.platform + "</p>";
			txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
			txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
			document.getElementById("example").innerHTML=txt;
		</script>

		<!--
		   -JavaScript 弹窗
		   -可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框
		   -->
		<!--警告框-->
		<input type="button" onclick="myFunction1()" value="显示警告框" />
		<!--确认框-->
		<p>点击按钮，显示确认框。</p>
		<button onclick="myFunction2()">点我</button>
		<p id="demo2"></p>
		<!--提示框-->
		<p>点击按钮查看输入的对话框。</p>
		<button onclick="myFunction3()">点我</button>
		<p id="demo3"></p>
		<!--换行-->
		<p>点击按钮在弹窗总使用换行。</p>
		<button onclick="myFunction4()">点我</button>
		<p id="demo4"></p>

	</body>
</html>
